<template>
  <div class="model-container">
    <div class="attachment-panel">
      <h3 class="panel-title">附件列表</h3>
      <ul class="file-list">
        <li
          v-for="file in attachments"
          :key="file.id"
          @click="openFile(file)"
          class="file-item"
        >
          <el-icon :size="18">
            <Document />
          </el-icon>
          <span>{{ file }}</span>
        </li>
      </ul>
    </div>

    <div class="model-viewer" id="container"></div>

    <FileViewer
      v-if="visible"
      v-model:visible="visible"
      :file="currentFile"
      @close="currentFile = null"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { Document } from "@element-plus/icons-vue";
import FileViewer from "@/components/FileViewer/index.vue";
import {
  Scene,
  DataType,
  CallbackName,
  DFTCore,
} from "/public/visionkit_sdk/dft-vision-kit.es";
const attachments = ref(); // 附件数据
const currentFile = ref({});
const visible = ref(false);
const openFile = (file) => {
  visible.value = true;
  const fileName = file.split(".");
  currentFile.value.type = fileName[1];
  currentFile.value.url = file;
  currentFile.value.name = fileName[0];
};
onMounted(() => {
  const searchID = window.location.href.split("=")[1];
  attachments.value = window.modelFile[searchID];
  const scene = new Scene({
    container: document.getElementById("container"),
    id: "96683850814767104",
    url: "/700102",
    // 加载方式设置为离线数据加载
    dataType: DataType.Offline,
    // 初始化场景时配置场景背景色为红色
    background: "none",
  });
  // viewLayer = scene.getViewLayer();
  // viewLayer.revertOriginalView();场景复位
  scene.on(CallbackName.Loaded, (event: any) => {
    handleTreeData(scene.coreScene.tileTree.children, searchID);
  });
  // 鼠标左键
  scene.coreScene.on(DFTCore.CLICK, (event) => {});
  /**
   * 将传入进来的数据的visibles设置为false
   */
  const handleTreeData = (data, searchID) => {
    for (let index = 0; index < data.length; index++) {
      if (data[index].id == searchID) {
        data[index].visible = true;
        scene.coreScene.focusTo([data[index]]);
        continue;
      }
      data[index].visible = false;
      if (data[index].children) {
        handleTreeData(data[index].children, searchID);
      }
    }
  };
});
onUnmounted(() => {
  // scene.destroy();
});
</script>

<style scoped>
.model-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
}

.attachment-panel {
  background: white;
  padding: 16px;
  border-right: 1px solid #eee;
  color: #333232;
}

.model-viewer {
  background: #fafafa;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
}

.file-item:hover {
  background: #f5f6fa;
}
</style>
